<template>
  <div class="detail">
    <!-- 攻略详情 -->
    <div class="postDetail">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
        <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="article">
        <!-- 标题 -->
        <h3 class="postTitle">{{postDetail.title}}</h3>
        <div class="post_info">
          <span>攻略：{{ filterDate}}</span>
          <span>阅读：{{postDetail.watch}}</span>
        </div>
        <!-- 文章内容 -->
        <div class="post_content" v-html="postDetail.content"></div>
        <!-- 点赞、评论、分享 -->
        <div class="post_ctrl">
          <div class="ctrl_item">
            <i class="iconfont icon-dianzan" @click="clickLike"></i>
            <span>点赞({{postDetail.like?postDetail.like:postLike}})</span>
          </div>
          <div class="ctrl_item">
            <i class="iconfont icon-shoucang" @click="postStar"></i>
            <span>收藏</span>
          </div>
          <div class="ctrl_item">
            <i class="iconfont iconpinglun"></i>
            <span>评论({{total}})</span>
          </div>
          <div class="ctrl_item">
            <i class="iconfont iconfenxiang"></i>
            <span>分享</span>
          </div>
        </div>
      </div>
      <!-- 发布评论 -->
      <CommentSubmit
        ref="CommentSubmit"
        @removeUserData="userData = {}"
        @getCommentData="loadComment"
        :userData="userData"
      />
      <!-- 评论内容 -->
      <div class="comment" v-if="commentList.length > 0">
        <CommentIndex
          @replyParent="replyParent"
          v-for="(item,index) in commentList"
          :key="index"
          :comment="item"
        />
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          :page-size="pageSizs"
          :page-sizes="[2,5,10,16,20,50]"
          @current-change="currentIndex"
          @size-change="changeSize"
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 相关攻略 -->
    <div class="correlationDetail">
      <PostRecommend />
    </div>
  </div>
</template>

<script>
import CommentSubmit from "@/components/post/commentSubmit";
import CommentIndex from "@/components/post/parent/commentIndex";
import PostRecommend from "@/components/post/postRecommend";
export default {
  components: {
    CommentSubmit,
    CommentIndex,
    PostRecommend
  },
  data() {
    return {
      postDetail: {},
      commentList: [],
      total: 0,
      pageIndex: 0,
      pageSizs: 5,
      userData: {},
      postLike: 0
    };
  },
  computed: {
    filterDate() {
      return this.$moment(this.postDetail.created_at).format(
        "YYYY-MM-DD hh:mm"
      );
    }
  },
  watch: {
    $route: {
      handler() {
        this.loadPoatDetail();
        this.loadComment();
      },
      immediate: true
    }
  },
  // mounted() {
  //   this.loadPoatDetail();
  //   this.loadComment();
  // },
  methods: {
    // 获取文章数据
    loadPoatDetail() {
      this.$axios({
        url: "/posts/" + this.$route.query.id
      }).then(res => {
        if (res.status == 200) {
          this.postDetail = res.data;
          console.log(this.postDetail);
          // 定位到指定位置
          // process.browser 解决document报错问题
          if (process.browser) {
            document.querySelector("body").scrollIntoView();
          }
        }
      });
    },
    // 获取评论数据
    loadComment() {
      this.$axios({
        url: "posts/comments",
        params: {
          post: this.$route.query.id,
          _limit: this.pageSizs,
          _start: this.pageIndex
        }
      }).then(res => {
        this.total = res.data.total;
        this.commentList = res.data.data;
        console.log(this.commentList);
      });
    },
    // 监听回复事件
    replyParent(obj) {
      this.userData = obj;
      this.$refs.CommentSubmit.locationId();
    },
    // 点赞
    clickLike() {
      this.$axios({
        url: "/posts/like",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        },
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        this.$message.success(res.data.message);
        this.postLike = this.postDetail.like + 1;
      });
    },
    // 文章收藏
    postStar() {
      this.$axios({
        url: "posts/star",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        },
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        this.$message.success(res.data.message);
        console.log(res);
      });
    },
    // 当前页变化触发
    currentIndex(index) {
      this.pageIndex = index;
      this.loadComment();
    },
    // 当前页数变化触发
    changeSize(size) {
      this.pageSizs = size;
      this.loadComment();
    }
  }
};
</script>

<style lang="less" scoped>
.detail {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0 0;
  display: flex;
  // 攻略详情
  .postDetail {
    width: 700px;
    margin-right: 20px;
    .article {
      .postTitle {
        padding: 20px 0;
        font-size: 32px;
        border-bottom: 1px solid #f2f2f2;
      }
      .post_info {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
        font-size: 16px;
        color: #a0a4a4;
        > span {
          padding-right: 16px;
        }
      }
      .post_content {
        // 修改v-html渲染的图片样式
        /deep/ img {
          max-width: 700px;
        }
      }
      .post_ctrl {
        display: flex;
        justify-content: center;
        padding: 50px 0 30px;
        .ctrl_item {
          display: flex;
          align-items: center;
          flex-direction: column;
          padding: 0 20px;
          > i {
            display: block;
            font-size: 28px;
            color: orange;
            cursor: pointer;
          }
          > span {
            margin-top: 5px;
            font-size: 14px;
            color: #999;
          }
        }
      }
    }
    .pagination {
      padding: 10px 0 20px;
      width: 100%;
      text-align: center;
    }
  }
  .comment {
    border: 1px solid #dfdfdf;
  }
  // 相关攻略
  .correlationDetail {
    flex: 1;
  }
}
</style>